import { PenChildProps } from "@/types";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { ColorPicker, InputNumber, Select, Space, Switch } from "antd";
import { Gradient } from "@meta2d/core";
import { useEffect } from "react";
//处理虚线
export let lineDashArr = {
  type1: [],
  type2: [10, 10],
  type3: [15, 3, 3, 3],
  type4: [12, 3, 3],
};
//处理虚线
export const getLineDashValue = (arr: number[] | undefined) => {
  if (arr == undefined) return;
  for (const key in lineDashArr) {
    if (
      JSON.stringify(lineDashArr[key as keyof typeof lineDashArr]) ==
      JSON.stringify(arr)
    ) {
      return key;
    }
  }
};
export function PenStyle({ penOptions, setPenValue }: PenChildProps) {
  useEffect(() => {
    if (penOptions.bkType == undefined) {
      setPenValue("bkType", Gradient.None);
    }
  }, []);
  return (
    <>
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        <FormRowCol label="线条样式">
          <Select
            className={"w-full"}
            value={getLineDashValue(penOptions.lineDash)}
            options={[
              { label: "直线", value: "type1" },
              { label: "样式1", value: "type2" },
              { label: "样式2", value: "type3" },
              { label: "样式3", value: "type4" },
            ]}
            onSelect={(value) => {
              setPenValue(
                "lineDash",
                lineDashArr[value as keyof typeof lineDashArr],
              );
            }}
          />
        </FormRowCol>
        <FormRowCol label="线条渐变">
          <Select
            className={"w-full"}
            value={penOptions.strokeType}
            defaultValue={Gradient.None}
            options={[
              { label: "无", value: Gradient.None },
              { label: "线性渐变", value: Gradient.Linear },
            ]}
            onSelect={(value) => {
              setPenValue("strokeType", value);
            }}
          />
        </FormRowCol>
        {penOptions.strokeType != Gradient.Linear ? (
          <FormRowCol label="颜色">
            <ColorPicker
              className={"w-full"}
              value={penOptions.color}
              showText
              allowClear
              onChange={(_, hex) => {
                setPenValue("color", hex);
              }}
            />
          </FormRowCol>
        ) : (
          <>
            <FormRowCol label="线条渐变色">
              <ColorPicker
                value={penOptions.lineGradientFromColor}
                allowClear
                onChange={(_, hex) => {
                  setPenValue("lineGradientFromColor", hex);
                }}
                style={{ marginRight: 10 }}
              />
              <ColorPicker
                value={penOptions.lineGradientToColor}
                allowClear
                onChange={(_, hex) => {
                  setPenValue("lineGradientToColor", hex);
                }}
              />
            </FormRowCol>
            <FormRowCol label="渐变角度">
              <InputNumber
                className={"w-full"}
                value={penOptions.lineGradientAngle}
                onChange={(value) => setPenValue("lineGradientAngle", value)}
              />
            </FormRowCol>
          </>
        )}
        <FormRowCol label="浮动颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.hoverColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("hoverColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="选中颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.activeColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("activeColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="线宽">
          <InputNumber
            className={"w-full"}
            value={penOptions.lineWidth}
            onChange={(value) => setPenValue("lineWidth", value)}
          />
        </FormRowCol>
        <FormRowCol label="背景">
          <Select
            className={"w-full"}
            value={penOptions.bkType}
            defaultValue={Gradient.None}
            options={[
              { label: "纯色背景", value: Gradient.None },
              { label: "线性渐变", value: Gradient.Linear },
              { label: "径像渐变", value: Gradient.Radial },
            ]}
            onSelect={(value) => {
              setPenValue("bkType", value);
            }}
          />
        </FormRowCol>
        {(penOptions.bkType == Gradient.None ||
          penOptions.bkType == undefined) && (
          <FormRowCol label="背景颜色">
            <ColorPicker
              className={"w-full"}
              value={penOptions.background}
              showText
              allowClear
              onChange={(_, hex) => {
                setPenValue("background", hex);
              }}
            />
          </FormRowCol>
        )}
        {(penOptions.bkType == Gradient.Linear ||
          penOptions.bkType == Gradient.Radial) && (
          <FormRowCol label="线条渐变色">
            <ColorPicker
              value={penOptions.gradientFromColor}
              allowClear
              onChange={(_, hex) => {
                setPenValue("gradientFromColor", hex);
              }}
              style={{ marginRight: 10 }}
            />
            <ColorPicker
              value={penOptions.gradientToColor}
              allowClear
              onChange={(_, hex) => {
                setPenValue("gradientToColor", hex);
              }}
            />
          </FormRowCol>
        )}
        {penOptions.bkType == Gradient.Radial && (
          <>
            <FormRowCol label="渐变半径">
              <InputNumber
                className={"w-full"}
                value={penOptions.gradientRadius}
                onChange={(value) => setPenValue("gradientRadius", value)}
              />
            </FormRowCol>
          </>
        )}
        <FormRowCol label="浮动背景颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.hoverBackground}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("hoverBackground", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="选中背景颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.activeBackground}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("activeBackground", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="透明度">
          <InputNumber
            className={"w-full"}
            value={penOptions.globalAlpha}
            min={0}
            max={1}
            step={0.01}
            placeholder={"0-1之间"}
            onChange={(value) => setPenValue("globalAlpha", value)}
          />
        </FormRowCol>

        <FormRowCol label="锚点颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.anchorColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("anchorColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="锚点背景颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.anchorBackground}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("anchorBackground", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="锚点半径">
          <InputNumber
            className={"w-full"}
            value={penOptions.anchorRadius}
            onChange={(value) => setPenValue("anchorRadius", value)}
          />
        </FormRowCol>
        <FormRowCol label="阴影颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.shadowColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("shadowColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="阴影模糊">
          <InputNumber
            className={"w-full"}
            value={penOptions.shadowBlur}
            onChange={(value) => setPenValue("shadowBlur", value)}
          />
        </FormRowCol>
        <FormRowCol label="阴影X偏移">
          <InputNumber
            className={"w-full"}
            value={penOptions.shadowOffsetX}
            onChange={(value) => setPenValue("shadowOffsetX", value)}
          />
        </FormRowCol>
        <FormRowCol label="阴影Y偏移">
          <InputNumber
            className={"w-full"}
            value={penOptions.shadowOffsetY}
            onChange={(value) => setPenValue("shadowOffsetY", value)}
          />
        </FormRowCol>
        <FormRowCol label="文字阴影">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.textHasShadow}
            onChange={(checked) => {
              setPenValue("textHasShadow", checked);
            }}
          />
        </FormRowCol>
      </Space>
    </>
  );
}
